<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <!-- 按钮 -->
    <div class="sale-btn">
      <div class="warp">
        <div class="touris-down">
          <!-- 新增客源 -->
          <div class="sale-list-li sale-list-lit">
            <button @click="Hous">房源录入</button>
            <button @click="Htran">房源转让</button>
          </div>
          <!-- 新增客源 end-->
        </div>
      </div>
    </div>
    <!-- 按钮end -->
    <!-- 筛选客源列表 -->
    <div class="sale-list">
      <div class="warp">
        <!--<div class="sale-list-li">-->
        <!--<div class="sale-list-li-left">全部</div>-->
        <!--<div class="sale-list-li-input">-->
        <!--<el-select v-model="AllValue" placeholder="默认全部" style="width:90%">-->
        <!--<el-option-->
        <!--v-for="item in all"-->
        <!--:key="item.AllValue"-->
        <!--:label="item.label"-->
        <!--:value="item.AllValue">-->
        <!--</el-option>-->
        <!--</el-select>-->
        <!--</div>-->
        <!--</div>-->
        <div class="sale-list-li">
          <div class="sale-list-li-left">交易</div>
          <div class="sale-list-li-input">
            <select v-model="formData.transaction" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in screen.transaction"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <!--状态-->
        <div class="sale-list-li">
          <div class="sale-list-li-left">状态</div>
          <div class="sale-list-li-input">
            <select v-model="formData.status" placeholder="请选择"  style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in screen.status"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <!--状态-->
        <div class="sale-list-li">
          <div class="sale-list-li-left">钥匙房源</div>
          <div class="sale-list-li-input">
            <select v-model="formData.is_has_key" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in yaoshi"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">省份</div>
          <div class="sale-list-li-input">
            <select v-model="formData.province_code" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;" @change="provchange">
              <option
                v-for="item in prov"
                :key="item.CODE"
                :label="item.region_name_c"
                :value="item.CODE">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">城市</div>
          <div class="sale-list-li-input sale-list-li-inputz">
            <select v-model="formData.city" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;" @change="citychange">
              <option
                v-for="item in city"
                :key="item.CODE"
                :label="item.region_name_c"
                :value="item.CODE">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">区县</div>
          <div class="sale-list-li-input">
            <select v-model="formData.area" placeholder="请选择" style="width:90%;;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in proper"
                :key="item.CODE"
                :label="item.region_name_c"
                :value="item.CODE">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">性质</div>
          <div class="sale-list-li-input">
            <select v-model="formData.public_private" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in screen.public_private"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">业主姓名</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.owner_name" style="width: 90%;;height: 26px;border: 1px solid #a0a0a0;padding-left: 10px;"placeholder="请输入业主姓名">
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">委托日期</div>
          <div class="sale-list-li-input">
            <el-date-picker style="width:90%; cursor:pointer;"
                            v-model="formData.entrust_date_start"
                            type="date"
                            placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <!--<div class="sale-list-li">-->
        <!--<div class="sale-list-li-left">最后跟进日期</div>-->
        <!--<div class="sale-list-li-input">-->
        <!--<el-date-picker style="width:90%;;"-->
        <!--v-model="formData.last_up_date_end"-->
        <!--type="date"-->
        <!--placeholder="选择日期">-->
        <!--</el-date-picker>-->
        <!--</div>-->
        <!--</div>-->
        <div class="sale-list-li">
          <div class="sale-list-li-left">朝向</div>
          <div class="sale-list-li-input">
            <select v-model="formData.orientation" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in screen.orientation"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">装修</div>
          <div class="sale-list-li-input">
            <select v-model="formData.renovation" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in screen.renovation"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">类型</div>
          <div class="sale-list-li-input">
            <select v-model="formData.type" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in screen.type"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">手机号码</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.owner_phone" style="width: 90%;;height: 26px;border: 1px solid #a0a0a0;padding-left: 10px;"placeholder="请输入手机号码" >
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">归属人</div>
          <div class="sale-list-li-input">
            <select v-model="formData.owner_man" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;">
              <option
                v-for="item in ascr"
                :key="item.ascrValue"
                :label="item.label"
                :value="item.ascrValue">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">区域</div>
          <div class="sale-list-li-input">
            <select v-model="formData.department" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;" @change="regionchange">
              <option
                v-for="item in region"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">门店</div>
          <div class="sale-list-li-input">
            <select v-model="formData.store" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;" @change="shopchange">
              <option
                v-for="item in shop"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">小组</div>
          <div class="sale-list-li-input">
            <select v-model="formData.group" placeholder="请选择" style="width:90%;height: 26px;border: 1px solid #a0a0a0;" @change="jjrChange">
              <option
                v-for="item in group"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">经纪人</div>
          <div class="sale-list-li-input">
            <div class="sale-list-li-input">
              <select v-model="formData.user" placeholder="请选择" style="width:128%;height: 26px;border: 1px solid #a0a0a0;">
                <option
                  v-for="item in jinjiren"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
        </div>
        <!--新加-->
        <div class="sale-list-li">
          <div class="sale-list-li-left">售总价</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.min_sell" style="width:90%;height: 26px;border: 1px solid #a0a0a0;padding-left: 10px;" placeholder="请输入售总价">
          </div>
        </div>

        <div class="sale-list-li">
          <div class="sale-list-li-left">售单价</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.sell" style="width:90%;border: 1px solid #a0a0a0;padding-left: 10px;" placeholder="请输入售单价">
          </div>
        </div>

        <div class="sale-list-li">
          <div class="sale-list-li-left">月租金</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.rent" style="width:90%;height: 26px;border: 1px solid #a0a0a0;padding-left: 10px;" placeholder="请输入月租金">
          </div>
        </div>
        <div class="sale-list-li">
          <button class="sale-search" @click="SetHourList(1)">查询</button>
          <button class="sale-search" @click="chongZhi">重置</button>
        </div>
      </div>
    </div>
    <!-- 筛选楼盘列表 end-->
    <!-- 客源列表 -->
    <div class="sale-info">
      <table>
        <!-- 标题 end-->
        <tr class="sale-info-title">
          <td>房源编号</td>
          <td>钥匙编号</td>
          <td>性质</td>
          <td>交易</td>
          <td>状态</td>
          <td>省份</td>
          <!--<td>城市</td>-->
          <td>区县</td>
          <td>楼盘字典</td>
          <td>分区</td>
          <td>楼栋</td>
          <td>单元</td>
          <td>房号</td>
          <!--<td>房龄</td>-->
          <td>朝向</td>
          <td>户型</td>
          <td>装修</td>
          <td>面积㎡</td>
          <td>售单价</td>
          <td>租金</td>
          <td>类型</td>
          <td>楼层</td>
          <td>经纪人</td>
          <td>组别</td>
          <td>门店</td>
          <td>区域</td>
          <td>委托日期</td>
          <td>最后跟进日期</td>
          <td>跟进</td>
          <td>操作</td>
          <td>删除</td>
        </tr>
        <!-- 标题 end-->
        <!-- 列表循环 -->
        <tr v-for="(item,index) in Hou.data" :key="index"  @click="edits(item.id)">
          <td >{{item.code}}</td><!--房源编号-->
          <td >{{item.key_code}}</td><!--钥匙编号-->
          <td >{{item.public_private}}</td><!--性质-->
          <td >{{item.transaction}}</td><!--交易-->
          <td >{{item.status_text}}</td><!--状态-->
          <td >{{item.province}}</td><!--省份-->
          <td >{{item.area}}</td><!--区县-->
          <td>{{item.premises_name}}</td><!--楼盘名-->
          <td >{{item.partition}}</td><!--分区-->
          <td>{{item.building}}</td><!--楼栋-->
          <td >{{item.unit}}</td><!--单元-->
          <!--<td @click="edits(item.id)">{{item.unit}}</td>--><!--楼层-->
          <td>{{item.room_num}}</td><!--房间-->
          <td>{{item.orientation}}</td><!--朝向-->
          <td >{{item.ht_room_num}}/{{item.ht_office_num}}/{{item.ht_toilet_num}}</td><!--户型-->
          <td>{{item.renovation}}</td><!--装修-->
          <td >{{item.acreage}}</td><!--面积-->
          <td >{{item.sell}}</td><!--单价-->
          <td >{{item.rent}}</td><!--租金-->
          <td >{{item.type}}</td><!--类型-->
          <td >{{item.floor}}/{{item.all_floor}}</td><!--楼层-->
          <td >{{item.username}}</td><!--经纪人-->
          <td>{{item.group}}</td><!--组别-->
          <td >{{item.store}}</td><!--门店-->
          <td>{{item.department}}</td><!--区域-->
          <td >{{item.entrust_date}}</td><!--委托日-->
          <td>{{item.last_up_date}}</td><!--最后跟进日-->
          <td><span class="edit" @click.stop="Hfollw(item.id)">跟进</span></td>
          <td><span class="edit" @click.stop="edit(item.id)">编辑</span></td>
          <td><span class="edit" @click.stop="handleDelete(item.id)">删除</span></td>
        </tr>
        <!-- 列表循环 end-->
      </table>
      <!-- 分页 -->
      <div class="page-list">
        <el-pagination
          layout="prev, pager, next"
          :total="Hou.total"
          :current-page="Hou.current_page"
          @current-change="SetHourList"
          :page-size="Hou.per_page"
        >
        </el-pagination>
      </div>
      <!-- 分页 end-->
    </div>
    <!-- 客源列表 end-->
    <!-- 尾部 -->
    <footers></footers>
    <!-- 尾部 end -->
    <!-- 房源录入 -->
    <div v-show="Housshow">
      <Housmodal :LDmodal="opensunmit" :HousClose="Hous" ref="hous" :FileIndex="FileIndex"></Housmodal>
    </div>
    <!-- 房源录入 end -->
    <!-- 房源转让 -->
    <div v-show="Htranshow">
      <HtranModal :SetHourList="SetHourList" :LDmodal="opensunmit" :HtranClose="Htran"></HtranModal>
    </div>
    <!-- 房源转让 end -->
    <!-- 房源编辑 -->
    <div v-show="editshow">
      <HousEdit :LDmodal="opensunmit"  :building="screen" :listss="listss" :ids="sid" ref="housEdit" :editCloses="openedit"></HousEdit>
    </div>
    <!-- 房源编辑 end -->
    <!-- 查看房源 -->

    <div v-if="editshows">
       <Seehous :listsss="listsss" :entryShowId="1" ref="seehous" :sid="sid" :editCloses="openedits"></Seehous>
    </div>
    <!-- 查看房源 end -->
    <!-- 房源跟进 -->
    <div v-show="Hfollwshow">
      <Hfollwmodal :LDmodal="opensunmit" :ids="sid" :HfollwClose="openHfollw"></Hfollwmodal>
    </div>
    <!-- 房源跟进 end -->
    <!--提示弹窗-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
  </div>
</template>
<script type="text/babel">
  import heads from './head';
  import footers from './footer';
  import Housmodal from './hous-modal';
  import HtranModal from './Htran-modal';
  import HousEdit from './hous-edit';
  import Hfollwmodal from './Hfollow-modal';
  import Seehous from './See-hous';
  import Modal from './modal.vue';
  export default {
    name: 'Hous',
    components: {
      heads,
      footers,
      Housmodal,
      HtranModal,
      HousEdit,
      Hfollwmodal,
      Seehous,
      Modal,
    },
    data() {
      return {
        _pages:0, //删除时会用到的
        formData:{},
        submitShow: false,
        message: '',
        pushTo: '',
        // 房源列表
        sid: 0,
        proper: [],
        public: '',
        group: [],
        jinjiren:[],
        user: '',
        max_floor: '',
        min_floor: '',
        region: [],
        zprice: '',
        file_index: '',
        zmeas: '',
        xmeas: '',
        listss: {},
        listsss: {},
        FileIndex: '',
        ids: 0,
        Hou: [],
        area_code: '',
        screen: {},
        city_code: '',
        city: [],
        shop: '',
        state: [{
          stateValue: '选项1',
          label: '黄金糕'
        }],
        ascr: [{
          ascrValue: '0',
          label: '无'
        },
          {
            ascrValue: '1',
            label: '全部'
          }
        ],
        prov: [],
        // 全部
        Housshow: false,
        Hfollwshow: false,
        Htranshow: false,
        editshow: false,
        editshows: false,
        yaoshi:[
          {title:'有',id:1},
          {title:'无',id:2},
        ]
      }
    },
    methods: {
      /*删除*/
      handleDelete(id){
        this.$http.delete('/index/house/'+id).then(({data})=>{
          this.submitShow = true;
          this.message = data.msg;
          //status: 1, msg: "删除成功",
          if(data.status === 1){

              this.SetHourList(this._pages);
          }

        })
      },
      /*删除*/

      submitHide(){
        setTimeout(()=>{
          this.submitShow = false;
        },1000);
      },
      // 重置
      chongZhi(){
        this.formData = {}
      },
      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true;
        this.submitHide();

      },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false
      },
      // 房源录入
      Hous: function () {
        this.Housshow = !this.Housshow;
        let that = this;


        //refs调子组件的方法获取省级数据
        this.$refs.hous.handelGetRrovince();

        // that.$http.get('/index/house/save_select_item')
        //   .then(function (res) {
        //     that.FileIndex = res.data.file_index;
        //     // that.file_index=file_index
        //     // alert(FileIndex)
        //   })
        //   .catch(function (err) {
        //     console.log(err);
        //   })
      },
      // 房源转让
      Htran: function () {
        this.Htranshow = !this.Htranshow
      },
      // 房源跟进
      Hfollw: function (id) {
        this.sid = id;
        this.Hfollwshow = !this.Hfollwshow
      },
      openHfollw: function () {
        this.Hfollwshow = !this.Hfollwshow
      },
      // 房源编辑
      edit: function (id) {

        this.sid = id;

        this.editshow = !this.editshow
        let that = this;


        this.$refs.housEdit.getFollowValue(id);

        // 设置表单数据列表
        that.$http.get('/index/house/edit/' + that.sid)
          .then(res => {
            that.listss = res.data.data;
            setTimeout(()=>{

              this.$refs.housEdit.handelGetRrovince();

            },20);

          })
          .catch(function (err) {
            console.log(err);
          })

      },
      // 房源查看
      edits: function (id) {
        this.sid = id
        let that = this;
        // 设置表单数据列表

        function h1(){
          return that.$http.get('/index/house/edit/'+id)
        }

        function h2(){
          return that.$http.get('/index/house/up/'+id)
        }




        //that.listsss = res.data.data;

         this.$http.all([h1(),h2()]).then((res)=>{

           that.listsss = res[0].data.data;
           this.editshows = !this.editshows

           if(res[1].data.data.length > 0){
             res[1].data.data[0].mode === ""?(that.listsss['mode'] = ""):(that.listsss['mode'] = res[1].data.data[0].mode );
           }

         }).catch((err)=>{
           console.log(err);
         });


      },
      openedit() {
        this.editshow = !this.editshow
      },
      openedits() {
        this.editshows = !this.editshows

        this.$refs.seehous.updataEntryshow();
      },
      // 设置房源列表
      SetHourList(page) {
        let that = this;
        that.formData.page = page;
        this._pages = page;       //删除
        this.$http.get('/index/house', {
          params: that.formData
        })
          .then(function (res) {
            console.log(res);
            that.Hou = res.data;
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 设置筛选下拉
      SetscreenList() {
        let that = this;
        this.$http.get('/index/house/save_select_item')
          .then(function (res) {
            that.screen = res.data;
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 获取城市下拉
      provchange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: "CN",
            upper_region: that.formData.province_code
          }
        })
          .then(function (res) {
            let data = res.data;
            that.city = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 获取城区下拉
      citychange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {params: {country_code: "CN", upper_region: that.formData.city}})
          .then(function (res) {
            let data = res.data;
            that.proper = data.res;
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 设置门店列表
      regionchange() {
        let that = this;
        that.$http.get('/index/department', {params: {id: that.formData.department}})
          .then(function (res) {
            that.shop = res.data
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      //获取小组
      shopchange() {
        let that = this;
        that.$http.get('/index/department', {params: {id: that.formData.store}})
          .then(function (res) {
            that.group = res.data
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //设置经纪人列表
      jjrChange(){
        let that = this;
        that.$http.get('/index/department/staff_group/' + that.formData.group)
          .then(function (res) {
            that.jinjiren = res.data
          })
          .catch(function (err) {
            console.log(err);
          })
      }
    },
    mounted: function () {
      // 初始化房源列表
      this.SetHourList();
      // 设置筛选下拉
      this.SetscreenList();
      // 设置省下拉列表
      let that = this;
      that.$http.get('/newapi/Area/getAreaRegion', {params: {country_code: "CN"}})
        .then(function (res) {
          that.prov = res.data.res
        })
        .catch(function (err) {
          console.log(err);
        });
      // 区域
      that.$http.get('/index/department', {params: {id: 0}})
        .then(function (res) {
          that.region = res.data
        })
        .catch(function (err) {
          console.log(err);
        })
    }
  }
</script>
<style scoped>
  .touris-down {
    width: 100%;
    float: left;
  }
  .sale-list-li-leftt {
    margin-top: 6px !important;
  }
  .sale-list-lit {
    margin-top: 0 !important;
  }
  .sale-info {
    width: 100%;
    float: left;
    position: fixed;
    top: 290px;
    height: calc(100% - 256px);
    overflow-y: auto;
  }
  table {
    width: 100%;
  }
  table td {
    line-height: 30px;
    height: 30px;
    border: 1px solid #d3d3d3;
  }
  .sale-list-li-inputz input {
    width: 40% !important;
    float: left;
  }
  .sale-list-li-inputz input:nth-child(2) {
    margin-left: 8%
  }
  .sale-list-li-left {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;

  }
  .page-list {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;
  }
  .sale-list-li {
    width: 100%;
    float: left;
    height: 30px;
    margin-top: 10px;
  }
  .sale-list-li-input {
    width: 70%;
    float: left;
  }
  .sale-search {
    margin-left: 25px;
    background: #415dba;
    color: #ffffff;
    font-size: 1.1em;
    border: none;
    height: 27px;
    line-height: 27px;
    width: 60px;
    border-radius: 5px;
    cursor:pointer;
  }
  .sale-info-title {
    background-color: #1590ed;
    width: 100%;
    overflow: hidden;
    font-weight:bold;
    color: #fff;
  }
  tr:nth-child(n+2):hover{
    background: #f9f9f9;
  }
  .sale-list-li-input input {
    width: 90%;
    float: left;
    box-sizing: border-box;
    height: 27px;
    line-height: 27px;
    background: #fff;
    border: 1px solid #d3d3d3;
    cursor:pointer;
  }
  .sale-btn {
    width: 100%;
    position: fixed;
    top: 80px;
    float: left;
    background-color: #ecedee;
    border-bottom: 1px solid #d3d3d3;
    line-height: 40px;
    height: 40px;
  }
  .sale-btn button {
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #415dba;
    color: #fff;
    margin-left: 30px;
    border: none;
    cursor:pointer;
  }
  .sale-list {
    position: fixed;
    top: 121px;
    background: #f9f9f9;
    float: left;
    width: 100%;
    left: 0;
    height: 165px;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e2;
  }
  .sale-list-li {
    width: 16.666666667%;
    float: left;
  }
  select{
    cursor:pointer;
  }
  td{
    cursor:pointer;
  }
</style>
